<!DOCTYPE html>
<html ng-app="he">
<head lang="en" >
    <meta charset="UTF-8">
    <title> HOME | TMS </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-route.min.js"></script>
	<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-sanitize.min.js"></script>
<script type="text/javascript">
	is_local='{{local}}';
	function loadcss(cssfile) {
		document.write('\<link rel="stylesheet" href="' + cssfile +'" type="text/css"/\>');
		    }
	function loadjs(script_filename) {
		document.write('\<script language="javascript" type="text/javascript" src="' + script_filename + '"\>\</script\>');
		    }
    if(!is_local){
	    static_url='/static';
    }else{
	    static_url='../../../../static';
    }
    var csslist=['/plugins/bootstrap/css/bootstrap.min.css',]
    for (x in csslist){
	    loadcss(static_url+csslist[x]);
    }
</script>
<script type="text/javascript">
	var app = angular.module('he',['ngRoute','ngSanitize','ngAnimate']);
	app.config(function($interpolateProvider) {
		  $interpolateProvider.startSymbol('[[');
		  $interpolateProvider.endSymbol(']]');
		});
	app.animation('.cloesd', function() {
		return{
			addClass :function (ele,cls,done) {
				$(ele).slideUp(500);
			},
			removeClass:function (ele,cls,done) {
				$(ele).slideDown(500);
			}
		}
	})
	app.config(function ($routeProvider) {
		     $routeProvider
			      .when('/v1', {                   // 注意网址是 xxx.com#/v1 这种格式的
			        templateUrl: './view1.html',
			        //controller: 'view1',
			      })
			      .when('/v2', {                   // 注意网址是 xxx.com#/v1 这种格式的
			        templateUrl: './view2.html',
			        controller: 'vc2',
			      })

	    });

	app.controller('view1',function ($scope,$http,$location) {
		$scope.list=[{name:'lis1'},
					{name:'lis2'}]
	})

	app.controller('content',function ($scope,$http,$location) {
		if(is_local){
			$scope.navi=[{name:'hello',
						childs:[{id:'1',name:'hello1',status:'c_active',link:'#/v1'},
								{id:'1',name:'hello2',status:'c_inactive',link:'#/v2'}]
						},
						{name:'world',
						childs:[{id:'1',name:'world1',status:'c_inactive',link:'ri'},
								{id:'1',name:'world2',status:'c_inactive',link:'ri'}]
						}
						]
		}
		$scope.single_active='hello2';
		$scope.single_open='hello';
		var single_p='hello';
		$scope.p_active=function (childs) {
			for (x in childs){
				if(childs[x].name==$scope.single_active){
					return true
				}
			}
			return false
		}
		//$scope.p_class=function (p_name) {
		//	if(p_name==single_p){return 'p_active'}
		//	else{return 'p_'}
			
		//}
		//$scope.c_class=function (name) {
		//	if($scope.single_active==name){return 'c_active'}
		//	else{return 'c_inactive'}
		//};
		$scope.c_click=function (name) {
			$scope.single_active=name;
		};
		$scope.p_click=function (name) {
			$scope.single_open=name;
		}
	})
</script>
<style type="text/css" media="screen" id="test">
	#header{
		color: white;
		background-color: blue;
		height:30px;
	}
	.p_active{
		color: red;
	}
	.c_active{
		color:yellow;
	}

</style>
</head>
<body ng-controller='content'>
<div id='out_wraper' class='container-fluid'>
	<div id='header' class='row'>
	TMS功能测试系统(HR部分)
	</div>
	<div id='content' class='row'>
		<div id='navi' class='col-xs-4'>
			<ul>
				<li ng-repeat='li in navi'>
					<a href="" ng-class='p_active(li.childs)?"p_active":"p_inactive"' ng-click='p_click(li.name)'><span ng-bind='li.name'></span></a>
					<ul ng-hide='single_open!=li.name' ng-class='{"p_active":p_active(li.name),"cloesd":single_open!=li.name}'>
						<li ng-repeat='ch in li.childs' ng-class='ch.name==single_active?"c_active":"c_inactive"' ng-click='c_click(ch.name)'>
							<a ng-href='[[ch.link]]'>
								<span ng-bind='ch.name'></span>
							</a>
							
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<div id='view' class='col-xs-8' ng-view>
			hello world
		</div>
	</div>
	<div id='footer' class='row'>
		i m footer
	</div>
</div>

</body>
</html>